<template>
  <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
    <swiper-item
        v-for="item in detail.image"
        :key="item.id"
        class="swpier-item"
    >
      <view class="image">
        <v-image :url="item.image.path" v-if="item.image" :width="'710rpx'" :height="'710rpx'" :duration="10" :is-fade="true" />
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
import Image from '../../../components/image/index'
export default {
  props: ['detail'],
  components: {
    'v-image': Image
  },
  data() {
    return {
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
$swiper_height: 710rpx;
.swiper {
  height: $swiper_height;
  background: white;
  .image {
    //background: red;
    height: $swiper_height;
    border-radius: 10rpx;
    overflow: hidden;
    //display: flex;
    //align-items: center;
    image {
      width: 100%;
      height: 100%;
      display: block;
      margin: auto;
    }
  }
}
</style>
